<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100vw;
            height: 150vh;
            background-color: antiquewhite;
        }
        .so{
            width: 100vw;
            height: 5vh;
            background-color: aqua;
        }
        .so input{
            width: 70vw;
            height: 3vh;
            margin-left: 2vh;
            margin-top: 1vw;
            border-radius: 10px;
        }
        .left{
            width: 20vw;
            height: 150vh;
            background-color: blueviolet;
            float: left;
        }
        .left ul{
            list-style: none;
        }
        .left ul li{
            width: 20vw;
            height: 5vh;
            background-color: rgb(224, 228, 227);
            text-align: center;
            line-height: 5vh;
        }
        .left ul li:hover{
            background-color: rgb(154, 154, 154);
        }
        .shangpin{
            width: 80vw;
            height: 150vh;
            background-color: rgb(242, 242, 242);
            float: left;
        }
        .shangpin div{
            width: 33vw;
            height: 15vh;
            background-color: rgb(168, 167, 173);
            float: left;
            margin-top: 2vw;
            margin-left: 2vh;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="so">
         &nbsp; logo  <input type="text">
          <button>搜索</button>
        </div>
        <div class="left">
            <ul>
                <li>居家</li>
                <li>美食</li>
                <li>穿搭</li>
                <li>运动</li>
                <li>数码</li>
                <li>护肤</li>
                <li>户外</li>
                <li>母婴</li>
                <li>医药</li>
                <li>男装</li>
                <li>女装</li>
                <li>家电</li>
                <li>电器</li>
                <li>汽车</li>
                <li>游戏</li>
                <li>图书</li>
                <li>水果</li>
                <li>玩乐</li>
                  <li>电器</li>
                <li>汽车</li>
                <li>游戏</li>
                <li>图书</li>
                <li>水果</li>
                <li>玩乐</li>
                <li>电器</li>
                <li>汽车</li>
                <li>游戏</li>
                <li>图书</li>
                <li>水果</li>
                <li>玩乐</li>

            </ul>
        </div>
        <div class="shangpin">
            <div class="div"></div>
             <div class="div"></div>
              <div class="div"></div>
               <div class="div"></div>
                <div class="div"></div>
                 <div class="div"></div>
                  <div class="div"></div>
                   <div class="div"></div>
                    <div class="div"></div>
                     <div class="div"></div> <div class="div"></div>
                      <div class="div"></div>

                       <div class="div"></div>

                        <div class="div"></div>

                         <div class="div"></div>
                          <div class="div"></div>
                           <div class="div"></div>

                  
        </div>
    </div>
</body>
</html>